<script setup lang="ts" name="dust_index">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from 'echarts';
import { auto } from "@popperjs/core";
import airtrend from "./airtrend/airtrend.vue";
import { CirclePlus, Search, Refresh, EditPen, Share, Notebook, Setting } from '@element-plus/icons-vue'
import { url } from "inspector";

const router = useRouter();

// 页面搜索重置输入框
const input1 = ref('')
const input2 = ref('')

// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

onMounted(() => {

})

</script>

<template>
  <div class="dust">
    <!-- 页面搜索重置输入框 -->
    <div class="dust-box">
      <el-input v-model="input1" placeholder="设备名称/设备编号" clearable style="width: 20%; margin-right: 20px;" />
      <el-input v-model="input2" placeholder="物联网卡号" clearable style="width: 20%; margin-right: 20px;" />
      <el-button type="primary" :icon="Search">查询</el-button>
      <el-button type="warning" :icon="Refresh">重置</el-button>
      <el-button type="success" :icon="CirclePlus">新增</el-button>
    </div>

    <!-- 设备名称top -->
    <div class="dust-top">
      <!-- 设备名称top -->
      <el-row>
        <el-col :span="6">
          <div class="dust-img">
            <img src="@/assets/image/home/png/mingc.png" alt="">
            <span>设备名称：施工区-施工场区-东北角-β射线</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="dust-img">
            <img src="@/assets/image/home/png/weizhi.png" alt="">
            <span>点击查看</span>
          </div>
        </el-col>
        <el-col :span="6">

        </el-col>
        <el-col :span="3">
          <div class="dust-img">
          </div>
        </el-col>
        <el-col :span="3">
          <div class="dust-img">
            <el-button :icon="EditPen" circle />
            <el-button :icon="Notebook" circle />
            <el-button :icon="Share" circle />
            <el-button :icon="Setting" circle />
          </div>
        </el-col>
      </el-row>
      <!-- 内容图标 -->
      <div class="row-h" v-for="item in 6" :key="item">
        <!-- 第一行 -->
        <el-row>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/bianhao.png" alt="">
              <span>设备编号： DB6030F75F1E44 </span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/wendu.png" alt="">
              <span>温度： 32.8°C </span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/zaoyin.png" alt="">
              <span>噪音： 52.6dB </span>
            </div>

          </el-col>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/pm2.5.png" alt="">
              <span>pm2.5： 0μg/m3 </span>
            </div>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/xinghao.png" alt="">
              <span>设备型号： β射线 </span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/shidu.png" alt="">
              <span>湿度： 48.6% </span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/fengsu.png" alt="">
              <span>风速： 1.3（m/s） </span>
            </div>

          </el-col>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/pm10.png" alt="">
              <span>PM10： 11.1μg/m3 </span>
            </div>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/wangka.png" alt="">
              <span>物联网卡： 0000 </span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/qiya.png" alt="">
              <span>气压： 100.3kPa </span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/fenghxiang.png" alt="">
              <span>风向： 东南风 </span>
            </div>

          </el-col>
          <el-col :span="6">
            <div class="dust-img">
              <img src="@/assets/image/home/png/gengxinshijian.png" alt="">
              <span>更新时间： 2022-07-28 15:03:10 </span>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 分页 -->
      <div class="demo-pagination-block">
        <el-pagination v-model:currentPage="currentPage4" v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background"
          layout="total, sizes, prev, pager, next, jumper" :total="40" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>

    </div>
  </div>
</template>

<style  lang="scss" scoped>
// .xxx-x {
//   width: 100%;
//   height: 100%;
// }
// 总页面
.dust {
  width: 100%;
  height: 100%;
  // padding: 50px;
  text-align: center;
  background: #141414;
  // padding: 24px;
}

// 查询重置新增
.dust-box {
  text-align: center;
  padding-top: 20px;
}

// 设备名称top
.dust-top {
  // margin-top: 20px;
  background: #141414;
  padding: 24px;
}

.dust-img {
  height: 45px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #b6b6b6;
}

.dust-img img {
  margin-right: 10px;
  width: 28px;
  height: 28px;
}

.row-h {
  margin-top: 10px;
  border-bottom: 1px solid #363636;
  background: #141414;
}

// 分页
.demo-pagination-block {
  margin-top: 20px;
  background: #141414; 
}

</style>
